$(function () {
    // 请求数据
    $.ajax({
        type: "GET",
        url: "../json/data2.json",
    }).then((res) => {
        let M = new Magnifier();
        M.getimages(res.data.images)
        M.bind()
        // 表格 
        // tablehtml(res.data.params)



        $(".lazy").lazyload()
        foor()


    });


    // 构造函数
    function Magnifier() {
        this.smallimages = [];
        this.bigimages = []
        this.index = 0;
        this.$page = $(".items span")
        this.$up = $("#up")
        this.$down = $("#down")
        this.$smallimg = $("#smallimg")
        this.$bigimg = $("#bigimg")
        this.$mo = $(".mo")
    }
    // 添加图片链接
    Magnifier.prototype.getimages = function (res) {
        var intance = this;
        $.map(res, function (items) {
            intance.smallimages.push(`https://www.konka.com/${items.m_url}`)
            intance.bigimages.push(`https://www.konka.com/${items.l_url}`)
        })
    }
    // 绑定事件
    Magnifier.prototype.bind = function () {
        var intance = this;
        // 操作下标
        this.$page.click(function () {
            intance.index = intance.$page.index($(this));
            intance.page(intance.index)
        })
        this.$up.click(function () {
            intance.index--
            intance.page(intance.index)
        })
        this.$down.click(function () {
            intance.index++
            intance.page(intance.index)
        })
        // 鼠标移入移出事件
        this.$mo.on("mouseover", function () {
            $(".big").addClass("active")
        });
        this.$mo.on("mouseout", function () {
            $(".big").removeClass("active")
        })
        this.$mo.on("mousemove", function (e) {
            intance.move(e.offsetX, e.offsetY);
        });
    }
    // 切换图片
    Magnifier.prototype.page = function (index) {
        this.$page.eq(index).addClass("active")
            .siblings().removeClass("active");
        this.$smallimg.attr("src", this.smallimages[index]);
        this.$bigimg.attr("src", this.bigimages[index])
    }
    Magnifier.prototype.move = function (x, y) {
        var _left = x - 10
        var _top = y - 10
        var _left_prop = _left / 350;
        var _top_prop = _top / 350;
        this.$bigimg.css({
            left: -250 * _left_prop,
            top: -250 * _top_prop
        })
    }

    
    var $dd = $(".xinghao dd");
    $dd.click(function () {
        var index = $dd.index($(this));
        $dd.eq(index).addClass("active")
            .siblings().removeClass("active");
    })
    var $jia = $(".jia");
    var $jian = $(".jian");
    var $inp = $(".connt");
    $jia.click(function () {
        var index = Number($inp.val()) +1;
        $inp.val(index)
    })
    $jian.click(function () {
        var index = Number($inp.val()) - 1
        $inp.val(index)
        console.log(1);
    })







    // 楼梯
    function foor() {
        let animate = false;
        let $floor = $(".floor li")
        let $title = $(".title");
        let $fllor = $(".fllor")
        let $foo = $(".foo li")
        let ttop = [];
        $.map($title, function (item) {

            var _top = $(item).offset().top
            ttop.push(parseInt(_top))
        })
        $foo.click(function () {
            if (animate) {
                return false;
            }
            animate = true
            var index = $foo.index($(this))
            ltop(index)
        })
        $floor.click(function () {
            if (animate) {
                return false;
            }
            var index = $floor.index($(this))
            ltop(index)
            animate = true
        })
        function ltop(index) {
            $("html,body").stop(true).animate({
                scrollTop: ttop[index] - 70
            }, function () {
                animate = false;
            });
        }
        $(window).scroll(function () {
            var scrollTop = $("html,body").scrollTop();
            for (let i = 0; i < $foo.length; i++) {
                if (scrollTop >= ttop[i]) {
                    $foo.eq(i).addClass("active")
                        .siblings("li")
                        .removeClass("active")
                }
            }
            if (scrollTop > ttop[0]) {
                $fllor.addClass("active")
            } else {
                $fllor.removeClass("active")
            }
        })
    }


})